﻿@model ViewModel.VMDepartment
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>编辑部门</title>
    <link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" />
    <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Scripts/h-ui/css/HuiFold.css" rel="stylesheet"/>
    <link href="~/Content/Css/System/Public/Table.css" rel="stylesheet" />

    <style>
        body {
            overflow-x: hidden;
        }

        .table {
            width: 90%;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        .leftTd {
            width: 30%;
            font-weight: bold;
        }

        .rightTd {
            width: 70%;
        }

        textarea {
            resize: none;
        }
    </style>
    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt IE 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
        <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>
    <![endif]-->
</head>
<body>
    <form id="form1" method="post">
        <ul id="Huifold1" class="Huifold">
            <li class="item">
                <h4>基础信息<b>-</b></h4>
                <div class="info">
                    <table class="table table-bordered table-hover table-condensed">
                        <input type="hidden" name="DepartmentId" value="@Model.Department.DepartmentId" />
                        <tr>
                            <td class="leftTd">部门名称</td>
                            <td class="rightTd">
                                <input type="text" id="departmentName" name="DepartmentName" value="@Model.Department.DepartmentName" class="form-control" placeholder="部门名称"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="leftTd">描述</td>
                            <td class="rightTd">
                                <textarea rows="3" id="description" name="Description" class="form-control" placeholder="描述">@Model.Department.Description</textarea>
                            </td>
                        </tr>
                        <tr>
                            <td class="leftTd">排序号</td>
                            <td class="rightTd">
                                <input type="text" id="sort" name="Sort" value="@Model.Department.Sort" class="form-control" placeholder="排序号"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="leftTd">已分配角色</td>
                            <td class="rightTd">
                                @Model.RolesName
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
            <li class="item">
                <h4>角色重新分配<b>-</b></h4>
                <div class="info">
                    <table id="table1" class="table table-border table-bordered table-bg table-hover">
                        <thead>
                        <tr class="text-c">
                            <th><input type="checkbox" name="" value=""></th>
                            <th>角色名称</th>
                            <th>描述</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </li>
        </ul>
        <div style="clear: both;"></div>
        <div class="row" style="margin-top:10px;margin-bottom: 10px;">
            <div class="col-xs-3 col-xs-offset-3">
                <button id="submitBtn" type="submit" class="btn btn-success" style="margin:0 auto;display: block;">保存</button>
            </div>
            <div class="col-xs-3">
                <button type="reset" class="btn btn-danger" style="margin: 0 auto; display: block;">重置</button>
            </div>
        </div>
    </form>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
<script src="~/Content/Scripts/layer/2.1/layer.js"></script>
<script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script>

<script src="~/Content/Scripts/TxyJs.js"></script>
<script>
    var iframeIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引
    var table1 = null;
    var roleValueStr = "@Model.RoleIds";//已分配的角色Id

    $(function () {
        $.Huifold("#Huifold1 .item h4", "#Huifold1 .item .info", "fast", 3, "click");
        table1 = initializeTable();

        $("#submitBtn").click(function () {
            var item = this;
            if ($("#departmentName").val().trim() == "") {
                layer.msg("请填写必要信息", { icon: 2, time: 2000 });
            }
            else {
                $(item).attr("disabled", "disabled");
                $.ajax({
                    url: "/Department/Manager/EditSubmit",
                    type: "post",
                    data: $("#form1").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Pass) {
                            parent.table1.ajax.reload();
                            parent.layer.msg(data.Msg, { icon: 1, time: 2000 });
                            parent.layer.close(iframeIndex);
                        }
                        else {
                            layer.msg(data.Msg, { icon: 2, time: 2000 });
                            $(item).removeAttr("disabled");
                        }
                    },
                    error: function (msg) {
                        layer.msg(msg.status, { icon: 2, time: 2000 });
                    }
                });
            }

            return false;
        });
    });

    function initializeTable() {
        var table = $("#table1").DataTable({
            /****************************************表格数据加载****************************************************/
            "serverSide": true,
            "ajax": {//ajax请求数据源
                "url": "/Role/Manager/Search",
                "type": "post",
                "data": function (data) {//添加额外的数据给服务器
                    data.pageIndex = (data.start / data.length) + 1;
                    data.searchStr = JSON.stringify($("#form1").serializeObject());
                }
            },
            "columns": [//列绑定
                { "defaultContent": "" },
                { "data": "RoleName" },
                { "data": "Description" },
            ],
            "columnDefs": [//列定义
                {
                    "targets": [0],
                    "data": "RoleId",
                    "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return "<input type='checkbox' value='" + data + "' name='id'>";
                    }
                },
                {
                    "targets": [2],
                    "data": "Description",
                    "render": function (data, type, full) {
                        return "<pre>" + data + "</pre>";
                    }
                },
            ],
            "rowCallback": function (row, data, displayIndex) {//行定义
                $(row).attr("class", "text-c");
            },
            "initComplete": function (settings, json) { //表格初始化完成后调用
                //选中已分配的角色
                var roleValueArr = roleValueStr.split(',');
                $("input:checkbox[name=id]").each(function () {
                    var item = this;
                    for (var i = 0; i < roleValueArr.length; i++) {
                        if ($(item).val() == roleValueArr[i]) {
                            item.checked = true;
                        }
                    }
                });
            },
            /****************************************表格数据加载****************************************************/
            /****************************************表格样式控制****************************************************/
            "dom": "t<'dataTables_info'il>p",//表格布局
            "processing": true,//等待加载效果
            "language": {//语言国际化
                "lengthMenu": "每页 _MENU_ 条",
                "zeroRecords": "没有找到记录",
                "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",
                "infoEmpty": "无记录",
                "paginate":
                {
                    "first": "首页",
                    "previous": "前一页",
                    "next": "后一页",
                    "last": "末页"
                },
                "processing": "表格在努力渲染中......",
                "loadingRecords": "加载记录中...",//注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效
            },
            "pagingType": "full_numbers",//分页格式
            "ordering": false,//排序功能
            "autoWidth": false,//自动宽度（这里关闭后，可以随着左侧的隐藏而扩展页面一起100%宽度）
            /****************************************表格样式控制****************************************************/
        });
        return table;
    }
</script>